<template>
   <div class="iphones-details-content-bottom">
      <div class="nav-tab">
         <el-tabs v-model="activeName">
            <el-tab-pane label="商品详情" name="first">
               <div v-if="commodityDetail.length">
                  <div v-for="(item, index) in commodityDetail" :key="index">
                     <img v-lazy="item.imgUrl" alt="index">
                  </div>
               </div>
            </el-tab-pane>
            <el-tab-pane label="规格参数" name="second">
               <div v-if="specificationData.length">
                  <table>
                     <tbody v-for="(item,index) in specificationData" :key="index">
                     <tr>
                        <th colspan="2" class="th-title">{{item.title}}</th>
                     </tr>
                     <tr class="tr-1" v-for="(items,indexs) in item.particulars" :key="indexs">
                        <td class="td-1">{{items.title}}</td>
                        <td class="td-2" v-html="items.value"></td>
                     </tr>
                     </tbody>
                  </table>
               </div>
            </el-tab-pane>
            <el-tab-pane label="常见问题" name="third" v-if="faq.length">
               <div>
                  <h1>热门回答</h1>
                  <div class="mod-item" v-for="(item, index) in faq" :key="index">
                     <div class="top">
                        <i class="el-icon-warning"></i>
                        <span>:</span>
                        <p class="title-top">{{item.title}}</p>
                     </div>
                     <div class="bottom">
                        <i class="el-icon-success"></i>
                        <span>:</span>
                        <p class="title-bottom">{{item.value}}</p>
                     </div>
                  </div>
               </div>
            </el-tab-pane>
         </el-tabs>
      </div>
   </div>
</template>

<script>
   export default {
      name: 'iphonesDetailsContentBottom',
      props: {
         faqData: {
            type: Boolean,
            default: null,
            isParameter: null
         },
         commodityDetail: {
            type: Array,
            delete() {
               return []
            }
         },
         specificationData: {
            type: Array,
            default() {
               return []
            }
         },
         faq: {
            type: Array,
            default() {
               return []
            }
         }
      },
      data() {
         return {
            activeName: 'first'
         }
      }
      // mounted() {
      //    console.log(this.commodityDetail)
      // },
      // methods: {}
   }
</script>

<style scoped lang="stylus">
   .nav-tab
      width 100%
      img
         min-height 280px
         width 100%

   table
      width 100%
   .th-title
      background #c0bfbf
      padding 14px 0
      padding-left 30px
      text-align left

   tr
      border 1px solid #dcdcdc

   .td-1
      display flex
      border-right 1px solid #dcdcdc
      justify-content center
      align-items center
      min-height 60px
      width 300px

   .td-2
      width 80%
      min-height 160px
      padding 10px 0
      padding-left 30px
   h1
      color #00c3f5
      margin 20px 0
      font-weight bold
      font-size 25px
   .mod-item
      border-bottom 1px solid #999
      padding 30px 0
      padding-left 10px
   .top,.bottom
      display flex
      height 50px
      align-items center
      span
         font-size 40px
         margin 0 10px
         position relative
         top -4px
         color #dcdcdc
         font-weight bold
      i
         color #dcdcdc
         font-size 30px
   .title-top
      font-size 18px
   .title-bottom
      color #666
      font-size 15px
</style>
